<template>
  <div>
    <my-tabs :tab-list="tabList">
      <el-link
        slot="right"
        :underline="false"
        icon="el-icon-setting"
        @click="handleCheckedChange"
        >{{ is_show ? '取消管理' : '管理' }}</el-link
      >
    </my-tabs>
    <div class="collection-list">
      <div class="item" v-for="(item, index) in collectionList" :key="item">
        <transition name="el-fade-in">
          <el-checkbox
            v-model="list[index].checked"
            v-if="is_show"
            @change="handleCurrentChecked($event, index)"
          />
        </transition>
        <div class="content">
          <!-- <div class="title" @click="handleTopicClick(item.topic_id)">
            <el-tag effect="dark" size="mini">{{ item.question_type_text }}</el-tag>
            {{ $util.delHtmlTag(item.topic_title, 120, '') }}
          </div> -->
          <div class="subject">
            <div class="type-text">{{ item.question_type_text }}</div>
            <div class="title" @click="handleTopicClick(item.topic_id)">
              {{ $util.delHtmlTag(item.topic_title, 120, '') }}
            </div>
          </div>
          <div class="time">{{ item.create_time | parseTime }}</div>
        </div>
      </div>
      <EduNoData v-if="$util.isEmpty(collectionList)"></EduNoData>
    </div>
    <div class="collection-footer">
      <div>
        <transition name="el-fade-in">
          <div class="left" v-if="is_show">
            <el-checkbox v-model="checkedAll" @change="handleAllChange">全选</el-checkbox>
            <div class="btn" @click="handleCancelCollect">取消收藏</div>
          </div>
        </transition>
      </div>
      <EduPagination @handleCurrentChange="handleCurrentChange"></EduPagination>
    </div>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          title: '题目收藏'
        }
      ],
      collectionList: [],
      list: [],
      checkedAll: false,
      is_show: false
    }
  },
  created() {
    this.handleGetDataList()
  },
  methods: {
    handleGetDataList() {
      this.$api.getExamTopicCollectList(
        {
          page: this.$store.getters['paginate/page'],
          count: 12
        },
        res => {
          this.handleGetDataSucc(res)
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.checkedAll = false
      this.handleGetDataList()
    },
    handleGetDataSucc(res) {
      const { data } = res
      this.collectionList = data.data
      this.$store.dispatch('paginate/setPaginate', {
        listRows: 12,
        total: data.total
      })
      let arr = this.collectionList.map(item => {
        return {
          topic_id: item.topic_id,
          checked: false
        }
      })
      this.list = arr
    },
    // 管理按钮切换
    handleCheckedChange() {
      this.is_show = !this.is_show
    },
    // 单选
    handleCurrentChecked(val, index) {
      this.list[index].checked = val
    },
    // 全选
    handleAllChange(val) {
      if (!this.$util.isEmpty(this.list)) {
        this.list.forEach(item => {
          item.checked = val
        })
      }
    },
    // 取消试题收藏
    handleCancelCollect() {
      const _this = this
      const list = this.list
      let data = list.filter(item => item.checked).map(item => item.topic_id)
      if (_this.$util.isEmpty(data)) {
        _this.$message.error('请选择要取消的试题')
      } else {
        _this.$api.postExamTopicCollect(
          {
            topic_id: data.toString(),
            status: 0
          },
          res => {
            _this.$message.info(res.data)
            this.handleGetDataList()
          }
        )
      }
    },
    handleTopicClick(id) {
      this.$router.push({
        path: '/my/exam/topic',
        query: {
          id: id
        }
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.collection-list {
  min-height: calc(100vh - 300px);
  .item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
    .content {
      flex: 1;
    }
    .el-checkbox {
      margin-right: 10px;
      margin-top: 3px;
    }
    .subject {
      @include clearfix();
      .type-text {
        margin-top: 4px;
        margin-right: 4px;
        float: left;
        font-size: 12px;
        color: #ffffff;
        padding: 2px 5px;
        border-radius: 2px;
        line-height: 1;
        @include edu-color-primary(background-color);
      }
      .title {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-import;
        line-height: 24px;
        cursor: pointer;
      }
    }
    .time {
      margin-top: 15px;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
    }
  }
}
.collection-footer {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    .btn {
      margin-left: 18px;
      padding: 7px 10px;
      font-size: 13px;
      font-weight: 400;
      border-width: 1px;
      border-style: solid;
      border-radius: 2px;
      cursor: pointer;
      @include edu-color-auxiliary;
      @include edu-color-primary(border-color);
    }
  }
  .el-pagination {
    margin-top: 0;
  }
}
</style>
